import React, { Fragment } from 'react'
import { StyleSheet, View, Text } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT, ONE_PIXEL, WIDTH } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomFlatList from 'src/components/custom-flat-list/index'
import RefreshState from 'src/components/custom-flat-list/RefreshState'
import EmptyView from 'src/components/empty-view/index'
import { companyLivePostManager } from 'src/utils/RequestAPI'
import { calcTimeHeader } from 'src/utils/TimeUtil'
import moment from 'moment'
import { TabView } from 'react-native-tab-view'
import { schoolPostStates } from 'src/utils/ConfigUtil'
import NavigationUtil from 'src/utils/NavigationUtil'

export default class JobList extends React.Component {
  static propTypes = {
    channelId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  }

  constructor (props) {
    super(props)
    this.state = {
      data: []
    }
  }

  page = 1

  limit = 10

  render () {
    const { data } = this.state
    return (
      <View style={styles.container}>
        <CustomFlatList
          ref={this._setFlatListRef}
          style={styles.flatList}
          renderItem={this._renderItem}
          data={data}
          keyExtractor={this._keyExtractor}
          onHeaderRefresh={this._onHeaderRefresh}
          onFooterRefresh={this._onFooterRefresh}
          ListEmptyComponent={this._listEmptyComponent()}
          showsVerticalScrollIndicator={false}
        />
        <CustomButton style={styles.addBtn} onPress={this.addPost}>
          <Text style={styles.addText}>+</Text>
        </CustomButton>
      </View>
    )
  }

  componentDidMount () {
    this._onHeaderRefresh()
  }

  addPost = (item) => {
    const getMyPostList = () => {
      this._onHeaderRefresh()
    }
    NavigationUtil.navigate('PartTimeRelease', { item, type: 3, channelId: this.props.channelId, getMyPostList })
  }

  _setFlatListRef = ref => {
    this.flatListRef = ref
  }

  _renderItem = data => {
    const { item } = data
    const { name, viewCount, sendCount, entryCount, gmtCreate, state } = item
    return (
      <CustomButton style={styles.itemContainer} params={item} onPress={this.addPost}>
        <Text style={styles.name}>{name}</Text>
        <View style={styles.countView}>
          <Text style={styles.count}>浏览：{viewCount || 0}</Text>
          <Text style={styles.count}>分享：{entryCount || 0}</Text>
          <Text style={styles.count}>投递：{sendCount || 0}</Text>
        </View>
        <View style={styles.bottomView}>
          <Text style={styles.time}>{calcTimeHeader(moment(gmtCreate).valueOf())}</Text>
          <Text style={[styles.state, state === 0 && styles.stateActive]}>{schoolPostStates[state]}</Text>
        </View>
      </CustomButton>
    )
  }

  _keyExtractor = item => {
    return item.id.toString()
  }

  _onHeaderRefresh = showLoading => {
    console.log('_onHeaderRefresh====>')
    this.page = 1
    const { channelId } = this.props
    companyLivePostManager({
      params: { page: this.page, limit: this.limit, channelId }
    })
      .then(({ data }) => {
        this.setState({
          data
        })
        this._setEndRefreshingState(data)
      })
      .catch(() => {
        this.setState({
          data: []
        })
        this._setEndRefreshingState()
      })
  }

  _onFooterRefresh = () => {
    console.log('_onFooterRefresh====>')
    this.page += 1
    const { channelId } = this.props
    companyLivePostManager({
      params: { page: this.page, limit: this.limit, channelId }
    })
      .then(({ data }) => {
        this.setState({
          data: [...this.state.data, ...data]
        })
        this._setEndRefreshingState(data)
      })
      .catch(() => {
        this.page -= 1
        this._setEndRefreshingState()
      })
  }

  _setEndRefreshingState = data => {
    if (data) {
      if (data.length > 9) {
        this._setEndRefreshState(RefreshState.CanLoadMore)
      } else {
        this._setEndRefreshState(RefreshState.NoMoreData)
      }
    } else {
      this._setEndRefreshState(RefreshState.Failure)
    }
  }

  _setEndRefreshState = state => {
    this.flatListRef.endRefreshing(state)
  }

  _listEmptyComponent = () => {
    return (
      <EmptyView
        emptyImg={require('src/imgC/home/post_no_data.png')}
        style={styles.emptyView}
        firstTip={'...'}
      />
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    backgroundColor: '#F9FAFA'
  },
  addBtn: {
    position: 'absolute',
    right: ScaleS(20),
    bottom: ScaleS(20),
    width: ScaleS(46),
    height: ScaleS(46),
    borderRadius: ScaleS(23),
    backgroundColor: '#3C3C3C',
    justifyContent: 'center',
    alignItems: 'center'
  },
  addText: {
    fontSize: ScaleT(24),
    lineHeight: ScaleS(24),
    fontWeight: '500',
    color: '#FFFFFF'
  },
  flatList: {
    flex: 1
  },
  itemContainer: {
    paddingHorizontal: ScaleS(20),
    paddingVertical: ScaleS(16),
    borderColor: 'rgba(151, 151, 151, 0.25)',
    borderBottomWidth: ONE_PIXEL
  },
  name: {
    fontSize: ScaleT(16),
    lineHeight: ScaleS(26),
    fontWeight: '500',
    color: '#3C3C3C'
  },
  countView: {
    marginTop: ScaleS(10),
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(22)
  },
  count: {
    width: ScaleS(75),
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#9E9E9E'
  },
  bottomView: {
    marginTop: ScaleS(15),
    paddingRight: ScaleS(14),
    height: ScaleS(22),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  time: {
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#CCCCCC'
  },
  state: {
    fontSize: ScaleT(12),
    fontWeight: '500',
    color: '#999999'
  },
  stateActive: {
    color: '#FEDD00'
  }
})
